<template>
  <div>
    <h1>EventTest组件</h1>
    <!-- 在html标签身上添加原生的dom事件 -->
    <button @click="test">点击添加原生dom事件</button>

    <!-- 组件标签身上添加原生的dom事件
    这里注意下 组件标签身上添加原生dom事件   这个事件就不再是 原生的dom事件  而是一个自定义事件
    将其变为原生的 click 点击事件  需要 加上 native
    这个事件是添加了组件的根元素  形成事件委派
      -->
    <Event1 @click.native="test1">test1</Event1>

    <!-- 在html标签身上 添加自定义事件  无意义 也不报错  这里就不写代码 -->

    <!-- 组件标签身上  添加的都是自定义事件   -->
    <Event2 @zdy="test3" @click="test4">test3</Event2>
  </div>
</template>

<script type="text/ecmascript-6">
  import Event1 from './Event1.vue'
  import Event2 from './Event2.vue'

  export default {
    name: 'EventTest',

    components: {
      Event1,
      Event2,
    },

    methods: {
      test(event){
        console.log(event.target.innerText);
      },
      test1(event){
        console.log(event.target.innerText);
      },
      test3(event){
        // 这里打印的是 自定义事件自己传递的参数
        console.log(event);
      },
      test4(event){
        // 这里打印的  也是自定义事件自己传递的参数
        console.log(event);
      }
    }
  }
</script>
